<template lang='pug'>
.dai-zhifu 
    .top
        .left
            i.iconfont.icon-xiaomi1
            span 小米商城
        .right 等待付款
    ul.aul
        li(v-for="d,i in list" ) 
            .top-box(@click="routerGo(d.id,d.num,dizhi[i])")
                img(:src="d.cover")
                .content {{d.name}}
                .right-box
                    p ￥{{d.price}}
                    p ×{{d.num}}
            .bottom-box
                .top_box_ali
                    span 2021-09-09  22:32
                    p 共{{d.num}}件商品  应付：{{d.num * d.price}}.00 元
                .buttonAll
                    button(@click="del(dizhi[i])") 取消订单
                    button() 立即付款
    .block(style="height:.5rem")
</template>
 
<script>
export default {
  name: "vueName",
  data() {
    return {
        arr: [],
        list: [],
        num: [],
        dizhi: []
    };
  },
  methods:{
      getok(){
          this.$http.get('http://192.168.43.168:8082/user/sele-dingd').then(({data})=>{
              this.arr = data.map(item=>item.sid.split(' '))
              console.log(data,'-----')
              this.dizhi = data.map(item=>item.aid)
              console.log(this.dizhi)
              let c  = data.map(item=>item.num.split(' '))
              c.forEach(item=>{
                  this.num.push(...item)
              })  
              this.num = this.num.filter(item=>item)
              this.getList()
          })
      },
      del(id){
          console.log(id)
      },
      getList(){
          this.$http.get('http://192.168.43.168:8082/user/allsearch').then(({data})=>{
              data.filter(item=>{
                  return this.arr.filter(el=>{
                    //   console.log(el)
                      return el.filter(a=>{
                        if(item.id == a){
                            this.list.push(item)
                        //   return true
                        }
                      })
                  })
              })
              this.list = this.list.map((item,index)=>{
                  return {
                      ...item,
                      num:this.num[index]
                  }
              })
              console.log(this.list)
          })
      },
      routerGo(id,num,dz){
          console.log(id,num)
          this.$router.push('/dang-detaill?id='+id+'&num='+num+'&dz='+dz);
      }
  },
  created(){
      this.getok()
  }
};
</script>
 
<style scoped lang="sass">
.top
    display: flex
    padding: .1rem
    justify-content: space-between
    border-bottom: 1px solid #ccc
    .left 
        
        i
            color: #ff6700
        span
            margin-left: .1rem
    .right
        color: #ff6700
        font-size: .14rem
.aul
    li
        margin-bottom: .4rem
        .top-box
            width: .85rem
            width: 100%
            display: flex
            justify-content: space-around
            align-items: center
            padding: .1rem 0
            border-bottom: 1px solid #ccc
            border-top: 1px solid #ccc
            img
                width: .7rem
                height: .7rem
        .bottom-box
            padding: .1rem
            .top_box_ali
                display: flex
                justify-content: space-between
                align-items: center
                span 
                    color: #ccc
                    font-size: .14rem
                p
                    font-size: .14rem
                    font-weight: bold
            .buttonAll
                display: flex
                flex-direction: row-reverse
                margin-top: .1rem
                button 
                    padding: .05rem .1rem
                    background: #fff
                    font-size: .14rem
                    border: 1px solid #000
                    margin-left: .1rem
                button:nth-child(1)
                    color: #999
                    border-color: #999
                button:nth-child(2)
                    color: #ff6700
                    border-color: #ff6700
</style>